<template>
    <div>
        <div style="display: flex; flex-direction: row;align-items: center;justify-content: space-between; border: #ddd 1px solid;border-radius: 5px;height: 35px;line-height: 35px;padding: 0 10px;"
        @click="click" @mouseleave='itemMouseleave()' @mouseenter='itemMouseenter()'>
            <div v-if="content" style="color: #333;">{{content}}</div>
            <div v-else style="color: #ccc;">请选择</div>
            <i v-if="singleSelectDialogMouseStatus" @click.stop="clear" class="el-icon-circle-close" style="cursor:pointer;color: #bbb;"></i>
            <i v-else class="el-icon-search" style="color: #bbb;"></i>
        </div>
    </div>
</template>

<script>

export default{
    props:{
      formKey: {
          type: String,
          default: ''
      },
      content: {
          type: [String, Number],
          default: ''
      },
      flag: {
          type: [String, Number],
          default: ''
      }
    },
    data(){
        return{
            singleSelectDialogMouseStatus: false
        }
    },
    methods:{
      click(){
        this.$emit('click', this.formKey, this.flag)
      },
      clear(){
        this.$emit('clear', this.formKey, this.flag)
      },
      itemMouseleave(){
        this.singleSelectDialogMouseStatus = false
      },
      itemMouseenter(){
        this.singleSelectDialogMouseStatus = true
      },
    },
}
</script>
<style scoped lang='scss'>

</style>
